import React from 'react';
import { connect } from 'dva';
import './Ueditor.scss'
import { UrlConfig, getConfig, uploadImgBase64, uploadOssImg, addToVideo, inStock, getStyleConfig } from '../../../services/fetch';
import {
    message, Drawer
} from 'antd';
import { guid, sec_to_time } from '../../../utils/Date';
// import VideoPlayer from "../../../components/VideoPlayer"

let UE = ''
@connect(({ add }) => ({
    add: add
}))

export default class Ueditor extends React.Component {


    // let a = window.document.getElementsByTagName
    static defaultProps = {
        config: {}
    }

    constructor(props) {
        super(props);
        this.state = {
            video: '',
            audio: '',
            video_title: '',
            video_img: '',
            transcode_data: [],
            currentVideo: null,
            joveVisible: false,
            config_json: {}
        };
        this.videoRef = React.createRef();
    }
    componentDidMount() {
        getStyleConfig().then(res => {
            console.log(res)
            if (res.data.code == 200) {
                this.setState({
                    config_json: res.data.data.config_json
                })
            }
        })
        window.UEDITOR_HOME_URL = `${UrlConfig}/application/fcinformation/resource/ueditor/`;
        let ueJs = `${UrlConfig}/application/fcinformation/resource/ueditor/ueditor.all.js`;
        const hide = message.loading('编辑器加载中...', 0);
        getConfig().then((res) => {
            let { config_json } = res.data.data;
            let cj = JSON.stringify(config_json);
            localStorage.setItem("config_json", cj);

            const permission = JSON.parse(localStorage.getItem('permissionzx')) || []

            if (config_json.aliyunOssSwitch) { //如果开启oss上传，则加载修改过包含oss上传的代码
                ueJs = `${UrlConfig}/application/fcinformation/resource/ueditor/ueditor.all.oss.js`;
            }
            let arr = [
                // `${UrlConfig}/application/fcinformation/resource/dash/dash.all.min.js`,
                `${UrlConfig}/application/fcinformation/resource/ueditor/ueditor.config.js`,
                ueJs,
                `${UrlConfig}/application/fcinformation/resource/ueditor/lang/zh-cn/zh-cn.js`,
                `//gosspublic.alicdn.com/aliyun-oss-sdk-6.1.0.min.js`,
            ]
            this.loadScript(arr, 0, () => {
                setTimeout(hide, 100);
                let xmsc = document.createElement('script');
                xmsc.src = `${UrlConfig}/application/fcinformation/resource/ueditor/xiumi-ue-dialog-v5.js`;
                document.querySelector('body').appendChild(xmsc);
                let xmcss = document.createElement('link');
                xmcss.href = `${UrlConfig}/application/fcinformation/resource/ueditor/xiumi-ue-v5.css`;
                xmcss.rel = `stylesheet`;
                document.querySelector('head').appendChild(xmcss);
                this.extendUEditor();
                if(permission.indexOf('info_paiban')>-1){
                    this.extendType()
                }
                this.extend135();
                this.initEditor()

                //获取详情数据
                if (this.props.match.params.video_id) {
                    this.props.dispatch({
                        type: 'add/edit',
                        data: this.props.match.params.video_id,
                        callback: (data) => {
                            let ue = window.UE.getEditor('content');
                            ue.ready(function () {
                                if (data.content) {
                                    ue.setContent(data.content);
                                }

                            });
                            // let id = data.type
                            // // this.setState({
                            // //     activeKey: String(id)
                            // // });
                            // this.props.dispatch({ type: 'add/setActiveKey', data: String(id) });
                            // this.setFields(data)
                        }
                    })
                }
                //专题编辑获取详情数据
                if (this.props.match.params.class == 'theme_edit') {
                    this.props.dispatch({
                        type: 'add/editGetThemeDetail',
                        data: this.props.match.params.theme_id,
                        callback: (data) => {
                            let ue = window.UE.getEditor('content');
                            ue.ready(function () {
                                if (data.content) {
                                    ue.setContent(data.content);
                                }

                            });
                            // let id = data.type
                            // // this.setState({
                            // //     activeKey: String(id)
                            // // });
                            // this.props.dispatch({ type: 'add/setActiveKey', data: String(id) });
                            // this.setFields(data)
                        }
                    })
                }
            });

        })

        // if (this.props.configJson.aliyunOssSwitch) { //如果开启oss上传，则加载修改过包含oss上传的代码
        //   ueJs = `${UrlConfig}/application/fcinformation/resource/ueditor/ueditor.all.oss.js`;
        // }
        // let arr = [
        //   // `${UrlConfig}/application/fcinformation/resource/dash/dash.all.min.js`,
        //   `${UrlConfig}/application/fcinformation/resource/ueditor/ueditor.config.js`, ueJs, `${UrlConfig}/application/fcinformation/resource/ueditor/lang/zh-cn/zh-cn.js`,
        // ]
        // const hide = message.loading('编辑器加载中...', 0);
        // this.loadScript(arr, 0, () => {
        //   setTimeout(hide, 100);
        //   this.initEditor()
        // });
    }


    componentWillUpdate() {
        let mask = document.querySelectorAll('.ant-modal-mask')
        console.log(mask, '66666666')
    }
    /**
 * 创建音频到富文本中
 */
    createAudioToUeditor = (url, content_id) => {
        let ue = window.UE.getEditor('content');
        ue.focus();
        let datas = `<p><audio contentid="${content_id}" style="margin: 10px auto;display: block;" src="${url}" controls>您的浏览器不支持 audio 标签。</audio></p><p></p>`;
        ue.execCommand('insertHtml', datas);
    }

    /**
     * 创建图片到富文本中
     */
    createImgToUeditor = (url) => {
        let ue = window.UE.getEditor('content');
        ue.focus();
        let datas = `<img style="margin: 10px auto;display: block;" src="${url}" />`;
        ue.execCommand('insertHtml', datas);
    }

    /**
     * 创建视频到富文本中
     */
    createVideoToUeditor = (url, org_url) => {

        this.setState({
            video: url,
            originalVideo: org_url
        })
    }
    /**
     * 创建魔盒样式库元素到富文本中
     */
    createStyleToUeditor = (url) => {
        let ue = window.UE.getEditor('content');
        ue.focus();
        let datas = `<p><img style="margin: 10px auto;display: block;" src="${url}" /></p>`;
        ue.execCommand('insertHtml', datas);
    }

    /**
     * 视频截图
     */
    snapScreen = () => {


        const hide = message.loading('视频上传成功,封面图生成中...', 0);
        /**
         * 上传视频自动生成封面图功能  详解
         * 调用上传视频接口后端返回上传成功mp4地址，先放到一个隐藏的video标签中，然后利用canvas的drawImage方法截取视频关键帧，获得图片的base64地址
         * 然后在调用后端接口将base64地址上传后转换成.jpg的资源文件地址，最后在设置到video标签的poster属性上，完成视频上传自动生成封面图功能
         *
         * 彩蛋，crossorigin="anonymous" 加了这个属性后可解决canvas获取跨域资源问题
         * 但是需要后端配合修改Access-Control-Allow-Origin
         * 由于本地老是报错出现跨域问题，至今没解决。所以每次只有佛系修改代码。打包后传到服务器上测试。
         *
         * */
        let url = this.state.video;
        let org_video = this.state.originalVideo;
        const hidden_video = this.videoRef.current;
        // const hidden_video = window.document.getElementById('hidden_video').children[0];

        let canvas = document.createElement("canvas");
        let data;
        var videoWidth = hidden_video.videoWidth > 0 ? hidden_video.videoWidth : 295;
        var videoHeight = hidden_video.videoHeight > 0 ? hidden_video.videoHeight : 165;
        var width = videoWidth > 640 ? 640 : videoWidth;

        var height = videoHeight * (width / videoWidth);

        // console.log(hidden_video);
        canvas.width = width;//这个设置不能丢，否者会成为canvas默认的300*150的大小
        canvas.height = height;//这个设置不能丢，否者会成为canvas默认的300*150的大小
        let ctx = canvas.getContext('2d'); //创建画布
        // hidden_video.setAttribute('crossOrigin', 'anonymous');

        ctx.drawImage(hidden_video, 0, 0, width, height); //将视频写入canvas

        data = canvas.toDataURL('images/png'); //

        uploadImgBase64({ img: data }).then((res) => {
            if (res.data.code == 200) {

                let video_data = this.getVideoInfo();
                let content_id = '';
                let video_img;
                if (this.props.configJson.aliyunOssSwitch) {
                    uploadOssImg({ file: res.data.data }).then((res2) => {
                        if (res2.data.code == 200) {

                            setTimeout(hide, 100);
                            video_img = res2.data.data;
                            video_data.video_img = video_img;

                            //视频入库
                            addToVideo(video_data).then((res) => {
                                if (res.data.code == 200) {

                                    if (this.props.configJson.aliyunTranscodeSwitch) {
                                        let transcode_data = this.state.transcode_data;
                                        transcode_data.video_id = res.data.data.video_id ? res.data.data.video_id : res.data.data;
                                        this.props.dispatch({
                                            type: 'add/setTranscodeData',
                                            data: [...this.props.add.transcode_data, transcode_data]
                                        })
                                    }

                                    if (this.props.configJson.mchSwitch && this.props.configJson.aliyunOssSwitch && this.props.configJson.materialPushSwitch) {
                                        let postData = {
                                            'video_id': res.data.data.video_id ? res.data.data.video_id : res.data.data
                                        }
                                        inStock(postData).then((res) => {
                                            if (res.data.code == 200) {
                                                content_id = res.data.data.contentId
                                            }

                                            this.insertVideo(content_id, url, video_img, org_video);
                                        })
                                    } else {

                                        this.insertVideo(content_id, url, video_img, org_video);
                                    }
                                } else {
                                    this.insertVideo(content_id, url, video_img, org_video);
                                }
                            });




                        }
                    })
                } else {

                    setTimeout(hide, 100);
                    video_img = res.data.data;
                    video_data.video_img = video_img;
                    //视频入库
                    addToVideo(video_data).then((res) => {
                        this.insertVideo(content_id, url, video_img, org_video);
                    });




                }
            }
        })


    }


    //获取上传视频信息
    getVideoInfo = () => {
        let data = {
            'video_src': this.state.video,
            'video_title': this.state.video_title,
        };
        const videoSrc = this.videoRef.current;
        // const videoSrc = window.document.getElementById('hidden_video').children[0];
        //获取视频时长
        if (!videoSrc) {
            data.video_time = '00:00:00';
        } else {
            if (!videoSrc.duration) {
                videoSrc.load();
                videoSrc.oncanplay = function () {
                    if (videoSrc.duration) {
                        data.video_time = sec_to_time(videoSrc.duration);
                    } else {
                        data.video_time = '00:00:00';
                    }
                }
            } else {
                let time = videoSrc.duration;
                time = Math.floor(time)
                data.video_time = sec_to_time(time);
            }
        }
        return data;
    }

    //获取上传音频信息
    getAudioInfo = () => {
        let data = {
            'video_src': this.state.audio,
            'type': 2,
            'video_img': `${UrlConfig}/application/fcpublic/resource/images/default.png`
        };

        const videoSrc = window.document.getElementById('audio_src');
        //获取音频时长
        if (!videoSrc) {
            data.video_time = '00:00:00';
        } else {

            if (!videoSrc.duration) {
                videoSrc.load();
                videoSrc.oncanplay = function () {
                    if (videoSrc.duration) {
                        data.video_time = sec_to_time(videoSrc.duration);
                    } else {
                        data.video_time = '00:00:00';
                    }
                }
            } else {
                let time = videoSrc.duration;
                time = Math.floor(time)
                data.video_time = sec_to_time(time);
            }
        }
        return data;
    }

    //视频插入富文本
    insertVideo = (content_id, url, poster, org_url) => {
        let ue = window.UE.getEditor('content');
        ue.focus();
        // org_url = url;
        // url = 'http://oss.combapp.sobeylingyun.com/recordings/z1.combapp-live2019.live156940916128526/1569825060_1569825322.m3u8';
        const ext = url ? url.split(".").pop().toLowerCase() : "mp4";
        const source_type = ext.indexOf('m3u8') > -1 ? "application/x-mpegURL" : "video/mp4";

        let datas;

        if (ext.indexOf("m3u8") != -1) {

            datas = `<p><video  class='video-js  vjs-big-play-centered vjs-16-9'   src="${org_url}" contentid="${content_id}" poster="${poster}"
                                        style="width:100%;"
                                         controls
                                        webkit-playsinline="true"
                                        x-webkit-airplay="true"
                                        playsinline="true"
                                        x5-playsinline="true"
                                        data-setup="{}"
                                    >

                                    <source src="${url}"   type="${source_type}">
                                    您的浏览器不支持 video 标签。
                                        </video></p><p></p>`;

        } else {
            datas = `<p><video  src="${url}"  contentid="${content_id}" poster="${poster}"
                                        style="width:100%;"
                                        controls
                                        webkit-playsinline="true"
                                        x-webkit-airplay="true"
                                        playsinline="true"
                                        x5-playsinline="true"
                                    >
                                    <source src="${url}"   type="${source_type}">
                                    您的浏览器不支持 video 标签。
                                    </video></p><p></p>`;
        }

        ue.execCommand('insertHtml', datas);
    }

    /**
     * 上传文件插件
     */
    fcUpload = (type) => {
        let max_size = 2000;
        if (type == 'audio') {
            max_size = 20;
        }

        let multiple = true;
        if (type == 'video' || type == 'audio') {
            multiple = false
        }

        window.fc = new window.FcUpload({
            elem: 'fcUpload' + type,
            oss: this.props.configJson.aliyunOssSwitch,       //是否为oss 上传
            multiple: multiple,  //是否允许上传多个文件
            type: type, // 上传文件类型\ img 图片，  video 视频
            actionImg: `${UrlConfig}/fcpublic/uploads/uploadImg`,  //本地上传图片地址
            actionVideo: `${UrlConfig}/fcpublic/uploads/uploadVideo`,  //本地上传视频地址
            actionOss: this.props.configJson.actionOss,  //后端认证接口，获取临时上传凭证
            endpoint: this.props.configJson.endpoint,
            bucket: this.props.configJson.bucket,
            customDomain: this.props.configJson.customDomain,
            ossConfig: this.props.configJson,
            source: 'editor',
            maxSize: max_size,
            callback: (callRes) => {
                console.log(callRes);
                let url;
                if (callRes.newResponse.length > 1 && type == 'video') {
                    message.error('视频暂不支持批量上传');
                    return;
                }
                callRes.newResponse.forEach(async (url, index) => {
                    if (!url) {
                        return;
                    }
                    switch (type) {
                        case 'video':
                            // url = "http://oss.combapp.sobeylingyun.com/recordings/z1.combapp-live2019.live156940916128526/1569825060_1569825322.m3u8";
                            let org_url;
                            if (callRes.response[index] && callRes.response[index].data && callRes.response[index].data.original_path) {
                                org_url = callRes.response[index].data.original_path;
                            } else {
                                org_url = url;
                            }
                            await this.createVideoToUeditor(url, org_url);
                            //转码
                            if (this.props.configJson.aliyunOssSwitch && this.props.configJson.aliyunTranscodeSwitch) {
                                let storeAs = guid();
                                let nowDate = new Date();
                                let year = nowDate.getFullYear();
                                let month = nowDate.getMonth() + 1;
                                let day = nowDate.getDate();
                                let new_url = 'transcode/' + year + '/' + month + '/' + day + '/' + storeAs;
                                let http = document.location.protocol + "//" + this.props.configJson.bucket + "." + this.props.configJson.endpoint + "/";

                                let old_url = url.replace(http, '');
                                if (this.props.configJson.customDomain) {
                                    old_url = old_url.replace(this.props.configJson.customDomain + '/', '');
                                    old_url = old_url.replace(this.props.configJson.customDomain, '');
                                }
                                let arr = old_url.split('.');
                                let postData = {
                                    oss_bucket: this.props.configJson.bucket,
                                    oss_input_object: old_url,
                                    oss_output_object: new_url + "." + arr[1],
                                }
                                this.setState({
                                    transcode_data: postData
                                })


                            }
                            this.setState({
                                video_title: callRes.file.name.split('.')[0]
                            })

                            break;
                        case 'audio':
                            this.setState({
                                audio: url
                            })
                            let video_data = this.getAudioInfo();
                            setTimeout(() => {
                                let video_data = this.getAudioInfo();
                                video_data.video_src = url;
                                video_data.video_title = callRes.file.name.split('.')[0];

                                let content_id = '';
                                //音频入视频库
                                addToVideo(video_data).then((res) => {
                                    if (res.data.code == 200) {
                                        //音频暂时不入jove库
                                        // if (this.props.configJson.mchSwitch && this.props.configJson.materialPushSwitch) {
                                        //     let postData = {
                                        //         'video_id': res.data.data,
                                        //
                                        //     }
                                        //     inStock(postData).then((res) => {
                                        //         if (res.data.code == 200) {
                                        //             content_id = res.data.data.contentId
                                        //         }
                                        //
                                        //         this.createAudioToUeditor(url, content_id);
                                        //     })
                                        // } else {
                                        //     this.createAudioToUeditor(url, content_id);
                                        // }
                                        this.createAudioToUeditor(url, content_id);
                                    } else {
                                        this.createAudioToUeditor(url, content_id);
                                    }
                                });
                            }, 1000)

                            break;
                        case 'img':
                            this.createImgToUeditor(url);
                            break;
                        case 'style':
                            this.createStyleToUeditor(url);
                            break;

                    }
                })
            }
        });

        window.fc.show();
    }

    /**
     * 递归加载JS
     */
    loadScript = (arr, leve = 0, callback) => {
        if (leve == arr.length) {
            callback()
            return
        } else {
            let sc = document.createElement('script');
            sc.src = arr[leve];
            document.querySelector('body').appendChild(sc);
            sc.onload = (e) => {  //加载完后继续递归加载
                leve += 1;
                this.loadScript(arr, leve, callback);
            }
            sc.onerror = (e) => {  //失败也同样
                leve += 1;
                this.loadScript(arr, leve, callback);
            }
        }
    }

    componentDidUpdate() {

    }

    componentWillUnmount() {
        // 组件卸载后，清除放入库的id

    }

    initEditor() {
        const that = this;
        const { id, config } = this.props;
        if (id) {
            try {
                /*加载之前先执行删除操作，否则如果存在页面切换，
                再切回带编辑器页面重新加载时不刷新无法渲染出编辑器*/
                UE.delEditor(id);
            } catch (e) { }
        }
        const ueEditor = window.UE.getEditor(this.props.id, config);
        // ueEditor.append('<link rel="stylesheet" type="text/css" href="./iframe.css">)

        // ueEditor.themePath = './Ueditor-iframe.css'
        // console.log('Ueditor 编辑器 : ', ueEditor.content);


        ueEditor.addListener('mouseover', function (type, e) {
            console.log(e.target, e.srcElement)
            const current = e.target || e.srcElement;
            const toolbar = document.getElementById("video-toolbar");
            if (toolbar) {
                if (/video/ig.test(current.tagName)) {
                    const rect = current.getBoundingClientRect();
                    toolbar.style.display = 'flex';
                    toolbar.style.top = rect.bottom + 105 + "px";
                    toolbar.style.left = rect.right + "px";
                    that.setState({ currentVideo: current });
                } else if (/audio/ig.test(current.tagName)) {
                    const rect = current.getBoundingClientRect();
                    toolbar.style.display = 'flex';
                    toolbar.style.top = rect.bottom + 105 + "px";
                    toolbar.style.left = rect.right + "px";
                    that.setState({ currentVideo: current });
                }
                else {
                    toolbar.style.display = 'none';
                }
            }
        });
        if (this.props.configJson.aliyunOssSwitch) {
            window.UE.Editor.prototype._bkGetActionUrl = window.UE.Editor.prototype.getActionUrl;
            window.UE.Editor.prototype.getActionUrl = function (action) {
                if (action == 'catchimage') {//重定义远程文件上传地址
                    return `${UrlConfig}/fcpublic/uploads/aliyunossUpload`;
                } else if (action == "uploadimage") {
                  //重定义远程文件上传地址
                  return `${UrlConfig}/fcpublic/uploads/aliyunossUploadBinary`;
                }else {
                    return this._bkGetActionUrl.call(this, action);
                }
            };

        }

        const self = this;

        ueEditor.ready((ueditor) => {
            if (!ueditor) {
                UE.delEditor(id);
                self.initEditor();
            } else {
                ueEditor.setHeight(1000);
            }

        })
    }

    extendUEditor = () => {
        const that = this;
        window.UE.registerUI('img audio video', function (editor, uiName) {
            //注册按钮执行时的command命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand: function () {
                    that.fcUpload(uiName);
                }
            });
            //创建一个button
            var btn = new window.UE.ui.Button({
                //按钮的名字
                name: uiName,
                //提示
                title: uiName === "img" ? "图片" : uiName === "audio" ? "音乐" : "视频",
                //添加额外样式,指定icon图标,这里默认使用一个重复的icon
                cssRules: '',
                //点击时执行的命令
                onclick: function () {
                    //这里可以不用执行命令,做你自己的操作也可
                    editor.execCommand(uiName);
                }
            });
            //当点到编辑内容上时，按钮要做的状态反射
            editor.addListener('selectionchange', function (e) {

                var state = editor.queryCommandState(uiName);
                if (state == -1) {
                    btn.setDisabled(true);
                    btn.setChecked(false);
                } else {
                    btn.setDisabled(false);
                    btn.setChecked(state);
                }
            });
            //因为你是添加button,所以需要返回这个button
            return btn;
        });
    }

    extendType = () => {
        let _this = this
        window.UE.registerUI('setType', function (editor, uiName) {
            var btn = new window.UE.ui.Button({
                name: 'sobey_setType',
                title: '一键排版',
                // cssRules:"background-image:url(../../../assets/setTypeIcon.png)",
                onclick: function () {
                    getStyleConfig().then(res => {
                        console.log(res)
                        if (res.data.code == 200) {
                            _this.setState({
                                config_json: res.data.data.config_json
                            }, () => {
                                const { config_json } = _this.state
                                editor.execCommand('removeformat')
                                if (config_json !== {}) {
                                    setTimeout(() => {
                                        editor.execCommand('fontfamily', config_json['font-family'] && config_json['font-family'])
                                        editor.execCommand('fontsize', config_json.font_size)
                                        editor.execCommand('rowspacing', config_json.beforeInterval, 'top');
                                        editor.execCommand('rowspacing', config_json.afterInterval, 'bottom');
                                        if (config_json.indent == 'open') {
                                            editor.execCommand('indent')
                                        }
                                        editor.execCommand('justify', config_json.justify)
                                        editor.execCommand('forecolor', config_json.color)
                                        editor.execCommand('lineheight', config_json.lineheight)
                                    }, 0)
                                }
                            })
                        }
                    })


                }
            });

            return btn;
        });
    }

    extend135 = () => {

        window.UE.registerUI('135dialog', function (editor, uiName) {
            var btn = new window.UE.ui.Button({
                name: 'sobey_135',
                title: '135',
                onclick: function () {
                    var dialog = new window.UE.ui.Dialog({
                        iframeUrl: editor.getOpt('UEDITOR_HOME_URL') + '135EditorDialogPage.html',
                        editor: editor,
                        name: 'sobey_135',
                        title: "135图文消息助手",
                        cssRules: "width: " + (window.innerWidth - 60) + "px;height: " + (
                            window.innerHeight - 60) + "px;"
                    });
                    dialog.render();
                    dialog.open();
                }
            });

            return btn;
        });
        window.UE.registerUI('xiumidialog', function (editor, uiName) {
            var btn = new window.UE.ui.Button({
                name: 'xiumi-connect',
                title: '秀米',
                onclick: function () {
                    var dialog = new window.UE.ui.Dialog({
                        iframeUrl: editor.getOpt('UEDITOR_HOME_URL') + 'xiumi-ue-dialog-v5.html',
                        editor: editor,
                        name: 'xiumi-connect',
                        title: "秀米图文消息助手",
                        cssRules: "width: " + (window.innerWidth - 60) + "px;height: " + (
                            window.innerHeight - 60) + "px;"
                    });
                    dialog.render();
                    dialog.open();
                }
            });

            return btn;
        });
    }



    setEdiotrContent = (content) => {
        let ue = window.UE.getEditor('content');
        ue.setContent(content);
    }
    // 前空行
    setFrontBlankLine = () => {
        const { currentVideo } = this.state;
        let ue = window.UE.getEditor('content');
        if (currentVideo) {
            currentVideo.parentNode.parentNode.insertBefore(this.getBlankLine(), currentVideo.parentNode);
        }
        ue.focus();
    }
    // 后空行
    setBackBlankLine = () => {
        const { currentVideo } = this.state;
        let ue = window.UE.getEditor('content');
        if (currentVideo) {
            currentVideo.parentNode.parentNode.insertBefore(this.getBlankLine(), currentVideo.parentNode.nextSibling);
        }
        ue.focus();
    }
    getBlankLine = () => {
        var p = document.createElement("p");
        var br = document.createElement("br");
        p.appendChild(br);
        return p;
    }
    // 打开jove
    openJove = () => {

        this.setState({ joveVisible: true });
    }
    // 删除视频
    delVideo = () => {
        const { currentVideo } = this.state;
        let ue = window.UE.getEditor('content');
        if (currentVideo) {
            currentVideo.parentNode.removeChild(currentVideo);
        }
        ue.focus();
    }
    onJoveClose = () => {
        this.setState({ joveVisible: false });
    }



    render() {
        let mask = document.querySelectorAll('.ant-modal-mask')
        console.log(mask, '66666666')
        let aa = window.frames['ueditor_0']
        console.log(window)
        // if(aa){
        //     let bb = aa.contentWindow.document.getElementsByTagName('video')
        //     console.log(bb)
        //     if(bb.length !== 0){
        //         // bb[0].setAttribute('controlslist','nodownload')
        //         for(let i = 0 ; i<bb.length;i++){
        //             bb[i].setAttribute('controlslist','nodownload')
        //         }
        //     }
        // }

        const { configJson, title } = this.props;
        const { currentVideo } = this.state;
        const contentid = currentVideo ? currentVideo.getAttribute("contentid") : "";
        console.log(contentid)
        const VideoUrl = this.state.video;
        // const VideoUrl = "http://oss.combapp.sobeylingyun.com/recordings/z1.combapp-live2019.live156940916128526/1569825060_1569825322.m3u8";
        const ext = VideoUrl ? VideoUrl.split(".").pop().toLowerCase() : "mp4";
        const videoJsOptions = {
            autoplay: false,
            controls: true,
            height: 165,
            width: 295,
            loop: false,
            // playbackRates: [0.5, 1, 1.5, 2],
            sources: [
                {
                    src: VideoUrl,
                    type: ext.indexOf('m3u8') > -1 ? "application/x-mpegURL" : "video/mp4",
                }
            ],
            isUpdate: 1  //是否新视频触发截图
        }

        return (
            <div className="ueditor-parent">
                <div id="video-toolbar" className="ueditor-video-box">
                    <div className="ueditor-video-toolbar">
                        <div onClick={this.setFrontBlankLine} className="toolbar-item">前空行</div>
                        <div onClick={this.setBackBlankLine} className="toolbar-item">后空行</div>
                        {
                            contentid ? <div onClick={this.openJove} className="toolbar-item">JOVE</div> : null
                        }
                        <div onClick={this.delVideo} className="toolbar-item">删除</div>
                    </div>

                </div>
                {/*{this.state.video ?  <VideoPlayer  snapScreen={() => { this.snapScreen(); }}   videoId="hidden_video" crossOrigin="anonymous"   videoJsOptions={videoJsOptions}  /> :''}*/}
                <video preload="auto" id="hidden_video" controls="controls" ref={this.videoRef} onCanPlay={this.snapScreen} src={this.state.originalVideo} crossOrigin="anonymous"></video>
                <div id={this.props.id} name="content" type="text/plain" ></div>
                <div id="fcUploadvideo"></div>
                <div id="fcUploadaudio"></div>
                <div id="fcUploadimg"></div>
                {/*<video id="VideoTime" preload="meta" style={{ display: "none" }} src={this.state.video} controls="controls">*/}
                {/*</video>*/}
                <audio id="audio_src" preload="meta" style={{ display: "none" }} src={this.state.audio} controls="controls">
                </audio>
                <Drawer
                    style={{ height: '100%' }}
                    placement="right"
                    closable={true}
                    mask={true}
                    width={688}
                    maskClosable={false}
                    onClose={this.onJoveClose}
                    visible={this.state.joveVisible}
                >
                    <iframe style={{ width: '100%', height: '100%' }} src={`${configJson.mchHost}/${configJson.mchToken}/${contentid}/${configJson.joveHost}/${configJson.mchSiteCode}?locale=zh&title=${title || ""}`} frameborder="0"></iframe>
                </Drawer>
            </div>
        )
    }
}
